<template>
  <el-dialog
    modal-class="__czr-confirm-dialog"
    v-bind="$attrs"
    v-model="DialogStore.confirmParam.show"
    align-center
    :show-close="false"
    :append-to-body="true"
    :width="width"
  >
    <div class="__czr-confirm">
      <div class="__czr-confirm-head">
        <div>{{ DialogStore.confirmParam.title }}</div>
        <div class="__hover" @click="CDClose">
          <SvgIcon name="czr_close" size="14" color="#909399" />
        </div>
      </div>
      <div class="__czr-confirm-content">
        <div>
          <SvgIcon name="czr_tip" size="20" :active="true" />
        </div>
        <div v-html="DialogStore.confirmParam.content" />
      </div>
      <div class="__czr-confirm-foot">
        <div class="__czr-dialog-foot_submit __hover" @click="CDSubmit">
          确认
        </div>
        <div class="__czr-dialog-foot_cancel __hover" @click="CDClose">
          取消
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { useDialogStore } from '@/stores'

defineOptions({
  name: 'CzrConfirm',
})
import { reactive } from 'vue'

const DialogStore = useDialogStore()
const props = defineProps({
  global: { default: false },
  show: { type: Boolean },
  title: { default: '' },
  width: { default: '31.25rem' },
})
const state = reactive({})

const CDClose = () => {
  DialogStore.$patch((s: any) => {
    s.confirmParam.show = false
  })
  DialogStore.confirmParam.onCancel()
}
const CDSubmit = () => {
  DialogStore.$patch((s: any) => {
    s.confirmParam.show = false
  })
  DialogStore.confirmParam.onSubmit()
}
</script>

<style scoped lang="scss"></style>
